<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-06-20 11:29:30
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-06-21 22:53:09
 * @FilePath: \shangyitong\src\pages\home\search\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<div class="search">
		<el-autocomplete
			v-model="hosname"
			:trigger-on-focus="false"
			:fetch-suggestions="fetchData"
			clearable
			class="form"
			placeholder="请你输入医院名称"
			@select="goDetail"
		/>
		<el-button type="primary">
			<el-icon style="vertical-align: middle">
				<Search />
			</el-icon>
		</el-button>
	</div>
</template>

<script setup lang="ts">
import { reqHospitalInfo } from '@/api/home'
import type { HospitalInfo } from '@/api/home/type'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
//创建路由器对象
let $router = useRouter()
//收集搜索医院的名字
let hosname = ref<string>('')
const fetchData = async (keyword: string, callback: any) => {
	let result: HospitalInfo = await reqHospitalInfo(keyword)
	if (result.code == 200) {
		console.log(result.data)
		//整理成组件需要的数据格式
		let showData = result.data.map((item) => {
			return {
				value: item.hosname,
				hoscode: item.hoscode,
			}
		})
		callback(showData)
	}
}
//选中数据时跳转到详情页
const goDetail = (item: any) => {
	// console.log('first', item)
	//跳转到医院详情页,需要携带query参数(医院编码)
	$router.push({
		path: '/hospital/register',
		query: {
			hoscode: item.hoscode,
		},
	})
}
</script>
<script lang="ts">
export default {
	name: 'search',
}
</script>
<style lang="scss" scoped>
.search {
	width: 100%;
	height: 50px;
	display: flex;
	justify-content: center;
	align-items: center;
	margin: 5px 0;
	//深度选择器 css >>>  less /deep/  scss  ::v-deep
	::v-deep .el-autocomplete {
		margin: 0 5px;
		width: 600px;
	}
}
</style>
